From bb57421e9878e8c00636c357afb80eff563ba263 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Thu, 10 Oct 2024 01:29:18 -0700 Subject: added diff historical to channel card, fix channel card CD alignment on sm devices --- src/pages/stats/[slug].tsx | 345 ++++++++++++++++++++++++--------------------- 1 file changed, 183 insertions(+), 162 deletions(-) (limited to 'src/pages/stats/[slug].tsx') diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx index 82d2757..6e6534a 100644 --- a/src/pages/stats/[slug].tsx +++ b/src/pages/stats/[slug].tsx @@ -4,197 +4,218 @@ import CompactTable from "@/components/CompactTable/CompactTable"; import DataChart from "@/components/DataChart/DataChart"; import Divider from "@/components/Divider/Divider"; import Footer from "@/components/Footer/Footer"; -import ChannelCard from "@/components/ChannelCard/ChannelCard" +import ChannelCard from "@/components/ChannelCard/ChannelCard"; import Head from "next/head"; import TitleBar from "../../components/TitleBar/TitleBar"; interface ChannelDataProp { - channel_id: string; - channel_name: string; - profile_pic: string; - subscribers: number; - sub_org: string; - video_count: number; - view_count: number; - next_milestone: string; - days_until_next_milestone: string; - next_milestone_date: string; + channel_id: string; + channel_name: string; + profile_pic: string; + subscribers: number; + sub_org: string; + video_count: number; + view_count: number; + next_milestone: string; + days_until_next_milestone: string; + next_milestone_date: string; } interface GraphDataProp { - labels: string[]; - datasets: number[]; + labels: string[]; + datasets: number[]; } interface CompactTableProps { - dates: string[]; - milestones: string[]; + dates: string[]; + milestones: string[]; } export const getServerSideProps: GetServerSideProps = async (context) => { - const { slug } = context.params || {}; + const { slug } = context.params || {}; - const chartData = await getGraphData(slug as string); - const channelData = await getChannelData(slug as string); - const sevenDayGraphData = await get7DGraphData(slug as string); - const milestoneData = await getMilestoneData(slug as string); + const chartData = await getGraphData(slug as string); + const channelData = await getChannelData(slug as string); + const sevenDayGraphData = await get7DGraphData(slug as string); + const milestoneData = await getMilestoneData(slug as string); - return { - props: { - chartData, - channelData, - slug, - sevenDayGraphData, - milestoneData, - }, - }; + return { + props: { + chartData, + channelData, + slug, + sevenDayGraphData, + milestoneData, + }, + }; }; function Page({ - chartData, - channelData, - sevenDayGraphData, - slug, - milestoneData, - }: { - chartData: GraphDataProp; - channelData: ChannelDataProp; - sevenDayGraphData: GraphDataProp; - slug: string; - milestoneData: CompactTableProps; - }) { - return ( - <> - - {slug as string} - PhaseTracker - - - - - - - - -
- -
-
- -
-
- -
-
- -
-
- -
- -
-
-